﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="SF.Dict.Web.List" %>

<%@ Register Src="UserControls/ucHeader.ascx" TagName="ucHeader" TagPrefix="uc1" %>
<%@ Register Src="UserControls/ucVocSort.ascx" TagName="ucVocSort" TagPrefix="uc2" %>
<%@ Register Src="UserControls/ucVocNav.ascx" TagName="ucVocNav" TagPrefix="uc3" %>
<%@ Register Src="UserControls/VocList.ascx" TagName="ucVocList" TagPrefix="uc4" %>
<%@ Register Src="UserControls/ucFooter.ascx" TagName="ucFooter" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>词表 | 挚友云海 | 给你一份来自分享的快乐</title>
	<script type="text/javascript" src="/Common/jquery-1.3.2.js"></script>
	<link href="/Common/base.css" rel="stylesheet" type="text/css" />
	<link href="/Common/list.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">

		$(document).ready(
			function () {
				for (var i = 0; i < AFollow.length; i++) {
					var vid = AFollow[i];
					$('#v_' + vid).removeClass('follow');
					$('#v_' + vid).addClass('followed');
					$('#v_' + vid).removeClass('action');
					$('#v_' + vid).html('已关注');
				}

				$.each($('.action'), function () {
					var text = $(this).text().trim();
					var vid = $(this).attr('data-id');
					if (text == '关注') {
						$(this).bind("click", { fun: Follow, title: "", argus: { vid: vid, again: false} }, ShowMiniHint);
					}
				});
			}
		);

		function Follow(argus) {
			if (userid == '') return;

			var vid = argus.vid;
			
			$.ajax({
				url: '/Submit/submit.ashx?page=list&action=012&vid=' + vid + '&rnd=' + Math.random(),
				type: 'GET',
				timeout: 5000,
				dataType: "json",
				error: function () {
					if (again) {
						AddMiniHint('重试失败，请稍候再试');
						HideMiniPop(1500);
					}
					else {
						AddMiniHint('操作失败，<a class="action" onclick="Follow({vid:' + vid + ',again:true})">请重试</a>');
					}
				},
				success: function (json) {
					if (json.code == 0) {
						AddMiniHint('操作成功！');
						if ($('#v_' + vid).text().trim() == '关注') {
							$('#v_' + vid).html('已关注');
							$('#v_' + vid).removeClass('follow');
							$('#v_' + vid).removeClass('action');
							$('#v_' + vid).addClass('followed');
							$('#v_' + vid).unbind("click");
							AFollow[AFollow.length] = vid;
							setTimeout(function () { window.location = "/Voc.aspx?vid=" + vid; }, 1000);
						}
						else {
							$('#v_' + vid).html('关注');
							$('#v_' + vid).addClass('follow');
						}

						HideMiniPop(1000);
					}
					else {
						if (again) {
							AddMiniHint('重试失败，请稍候再试');
							HideMiniPop(1500);
						}
						else {
							AddMiniHint('操作失败，<a class="action" onclick="Follow({vid:' + vid + ',again:true})">请重试</a>');
						}
					}
				}
			});
			return false;
		}

		function ShowMiniPop(e) {
			var holder = $('#minipop-holder');
			$('#minipop-action').show();
			$('#minipop-hint').hide();
			holder.fadeIn();
			var offset = $(this).offset();
			$('#minipop-tip').html(e.data.title);

			//距离上面的空白
			var top = offset.top - holder.outerHeight() - 5;
			if (top < 0) {
				top = offset.top + $(this).outerHeight() + 5;
			}

			var left = offset.left + -holder.outerWidth() / 2;
			holder.css({
				'top': top + 'px',
				'left': left + 12 + 'px'
			});

			$('#minipop-submit').bind('click', e.data.argus, e.data.fun);
		}

		function ShowMiniHint(e) {
			var holder = $('#minipop-holder');
			$('#minipop-action').hide();
			$('#minipop-hint').show();
			holder.fadeIn();
			$('#minipop-hint-tip').html('<img src="/Common/images/ajax-loader.gif" style="vertical-align:middle" />&nbsp;&nbsp;正在提交...');
			var offset = $(this).offset();
			
			//距离上面的空白
			var top = offset.top - holder.outerHeight() - 5;
			if (top < 0) {
				top = offset.top + $(this).outerHeight() + 5;
			}

			var left = offset.left + -holder.outerWidth() / 2;
			holder.css({
				'top': top + 'px',
				'left': left + 12 + 'px'
			});

			e.data.fun(e.data.argus);
		}

		function AddMiniHint(content) {
			$('#minipop-hint-tip').html(content);
			$('#minipop-action').hide();
			$('#minipop-hint').show();
		}

		function HideMiniPop(timeout) {
			$('#minipop-submit').unbind();
			if (timeout) {
				$('#minipop-holder').fadeOut(timeout);
			}
			else {
				$('#minipop-holder').hide();
			}
		}
	
	</script>
</head>
<body>
	<form id="form1" runat="server">
	<div id="wrap">
		<uc1:ucHeader ID="ucHeader1" PageName="List" runat="server" />
		<div id="content-holder">
			<div class="sort-holder">
				<div>
					<h2>
						<a href="/list.aspx" class="current">词汇表</a></h2>
				</div>
				<div class="tips">
					堆砌众人思绪，参与其间，收获于学习之外！</div>
				<div class="sort">
					<h4>
						分类：</h4>
					<uc2:ucVocSort ID="ucVocSort1" runat="server" />
				</div>
			</div>
			<div id="voclist">
				<div class="col1">
					<asp:Repeater ID="rp_voclist_col1" runat="server">
						<ItemTemplate>
							<div class="item">
								<a class="avatar" href="/Voc.aspx?vid=<%#Eval("VID")%>">
									<%#Eval("Name")%></a>
								<h5 class="title">
									<a href="/Voc.aspx?vid=<%#Eval("VID")%>">
										<%#Eval("Name")%></a></h5>
								<div class="desc">
									<%#Eval("description")%></div>
								<%#Eval("DictCount")%>个单词
								<span class="sum">
									<%#Eval("FollowCount")%>人在关注</span> <a title="点击关注" class="follow action" id="v_<%#Eval("VID")%>"
										data-id='<%#Eval("VID")%>'>
										关注</a> <span class='<%#Eval("ISSHOWNEW")%>'>NEW</span>
							</div>
						</ItemTemplate>
					</asp:Repeater>
				</div>
				<div class="col2">
					<asp:Repeater ID="rp_voclist_col2" runat="server">
						<ItemTemplate>
							<div class="item">
								<a class="avatar" href="/Voc.aspx?vid=<%#Eval("VID")%>">
									<%#Eval("Name")%></a>
								<h5 class="title">
									<a href="/Voc.aspx?vid=<%#Eval("VID")%>">
										<%#Eval("Name")%></a></h5>
								<div class="desc">
									<%#Eval("description")%></div>
								<%#Eval("DictCount")%>个单词
								<span class="sum">
									<%#Eval("FollowCount")%>人在关注</span> <a title="点击关注" class="follow action" id="v_<%#Eval("VID")%>"
										data-id='<%#Eval("VID")%>'>
										关注</a> <span class='<%#Eval("ISSHOWNEW")%>'>NEW</span>
							</div>
						</ItemTemplate>
					</asp:Repeater>
				</div>
				<div class="col3">
					<asp:Repeater ID="rp_voclist_col3" runat="server">
						<ItemTemplate>
							<div class="item">
								<a class="avatar" href="/Voc.aspx?vid=<%#Eval("VID")%>">
									<%#Eval("Name")%></a>
								<h5 class="title">
									<a href="/Voc.aspx?vid=<%#Eval("VID")%>">
										<%#Eval("Name")%></a></h5>
								<div class="desc">
									<%#Eval("description")%></div>
								<%#Eval("DictCount")%>个单词
								<span class="sum">
									<%#Eval("FollowCount")%>人在关注</span> <a title="点击关注" class="follow action" id="v_<%#Eval("VID")%>"
										data-id='<%#Eval("VID")%>'>
										关注</a> <span class='<%#Eval("ISSHOWNEW")%>'>NEW</span>
							</div>
						</ItemTemplate>
					</asp:Repeater>
				</div>
				<div class="col4">
					<asp:Repeater ID="rp_voclist_col4" runat="server">
						<ItemTemplate>
							<div class="item">
								<a class="avatar" href="/Voc.aspx?vid=<%#Eval("VID")%>">
									<%#Eval("Name")%></a>
								<h5 class="title">
									<a href="/Voc.aspx?vid=<%#Eval("VID")%>">
										<%#Eval("Name")%></a></h5>
								<div class="desc">
									<%#Eval("description")%></div>
								<%#Eval("DictCount")%>个单词
								<span class="sum">
									<%#Eval("FollowCount")%>人在关注</span> <a title="点击关注" class="follow action" id="v_<%#Eval("VID")%>"
										data-id='<%#Eval("VID")%>'>
										关注</a> <span class='<%#Eval("ISSHOWNEW")%>'>NEW</span>
							</div>
						</ItemTemplate>
					</asp:Repeater>
				</div>
				<div class="clear">
				</div>
			</div>
		</div>
		<uc2:ucFooter ID="ucFooter1" runat="server" />
		<div id="minipop-holder" class="hide">
			<div id="minipop-action" class="minipop">
				<div class="gray6">
					<div id="minipop-tip">
					</div>
				</div>
				<div class="btn-holder">
					<span><a id="minipop-submit" href="javascript:void(0)" class="action">确定</a></span>&nbsp;&nbsp;
					<span><a href="javascript:void(0)" onclick="HideMiniPop()" class="action">取消</a>
					</span>
				</div>
			</div>
			<div id="minipop-hint" class="minipop hide">
				<div class="gray6">
					<div id="minipop-hint-tip">
					</div>
				</div>
			</div>
		</div>
	</div>
	</form>
</body>
</html>
